<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" layout:decorator="layout/default">
<head>
    <meta charset="UTF-8">
</head>
<section layout:fragment="content">
    <div class="layui-fluid">
        <div class="layui-collapse" lay-accordion>
            <div class="layui-colla-item">
                <h2 class="layui-colla-title search-colla-title"><i
                        class="icon iconfont icon-circle"></i><span>查询条件</span></h2>
                <div class="layui-colla-content layui-show">
                    <form id="searchInspStationForm" class="layui-form" action="" autocomplete="off">
                        <div class="layui-row layui-col-space30">
                            <div class="layui-col-sm3">
                                <div class="layui-form-item">
                                    <label class="layui-form-label">检测站运营公司</label>
                                    <input class="layui-input eyc-uppercase" name="company" type="text">
                                </div>
                            </div>
                            <div class="layui-col-sm3">
                                <div class="layui-form-item">
                                    <label class="layui-form-label">&nbsp;</label>
                                    <div class="layui-row layui-col-sm12">
                                    <input type="checkbox" name="isActive"  value="true" title="是否有效" lay-skin="primary" checked>
                                    </div>
                                </div>
                            </div>
                            <div class="layui-col-sm3">
                                <div class="layui-form-item">
                                    <label class="layui-form-label">&nbsp;</label>
                                    <div class="layui-row">
                                        <button type="button" data-method="refreshData"
                                                class="layui-btn layui-btn-sm layui-btn-primary layui-border-green">
                                            <i class="icon iconfont icon-search"></i>查询
                                        </button>
                                        <button type="reset"
                                                class="layui-btn layui-btn-sm layui-btn-primary layui-border-blue">
                                            <i class="icon iconfont icon-reset"></i><span>重置</span>
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>

        <div class="layui-row">
            <div class="layui-col-sm3">
                <div class="layui-form-item eyc-margin-top15">
                    <label class="layui-colla-title"><i class="icon iconfont icon-circle"></i><span>商户列表</span></label>
                </div>
            </div>
            <div class="layui-col-sm9">
                <div class="layui-form-item eyc-margin-top15 eyc-text-align-right">
                    <button type="button" data-method="add"
                            class="layui-btn layui-btn-sm layui-btn-primary layui-border-orange">
                        <i class="icon iconfont icon-add"></i><span>新增</span>
                    </button>
                    <button type="button" data-method="edit"
                            class="layui-btn layui-btn-sm layui-btn-primary layui-border-red">
                        <i class="icon iconfont icon-edit"></i><span>编辑</span>
                    </button>
                    <button type="button" data-method="del"
                            class="layui-btn layui-btn-sm layui-btn-primary layui-border-black">
                        <i class="icon iconfont icon-delete"></i><span>删除</span>
                    </button>
                </div>
            </div>
            <div class="layui-col-sm12" id="inspStationList"></div>
        </div>
    </div>
    <script th:src="@{/layui/layui.js}"></script>
    <script>
        let config = {
            $table: $('#inspStationList')
        };
        let calcTableHeight = ($tableContainer) => {
            var paddingTop = $('body').css('padding-top');
            var bodyPaddingHeight = paddingTop.replace(/[^0-9]/ig, "");
            var height = $(window).height() - $tableContainer.offset().top - $(window).scrollTop() - bodyPaddingHeight;
            return height;
        };
        let initTable = () => {
            let colModel = [ {
                dataIndx: 'stationId',
                title: '网点号',
                editable: false,
                align: "center",
                minWidth: 60
            },{
                    dataIndx: 'company',
                    title: '检测站运营公司',
                    editable: false,
                    align: "center",
                    minWidth: 220
                }
                , {
                    dataIndx: 'province',
                    title: '省市区',
                    editable: false,
                    align: "center",
                    minWidth: 180,
                    render: function (ui) {
                        var rowData = ui.rowData;
                        return (rowData.province ? rowData.province : '') + (rowData.prepecture ? rowData.prepecture : '')
                            + (rowData.county ? rowData.county : '')

                    }
                }
                , {dataIndx: 'addr', title: '详细地址', editable: false, align: "center", minWidth: 180}
                , {dataIndx: 'contact', title: '联系人', editable: false, align: "center", minWidth: 100}
                , {dataIndx: 'contactNum', title: '联系电话', editable: false, align: "center", minWidth: 120}
                , {dataIndx: 'timeConsume', title: '检测时长', editable: false, align: "center", minWidth: 100}
                , {dataIndx: 'remark', title: '备注', editable: false, align: "center", minWidth: 350}
                , {dataIndx: 'isActive', title: '是否有效', editable: false, align: "center", minWidth: 100,render:function (ui) {
                            if(ui.cellData===false){
                                return '无效';
                            }
                            return '有效'
                    }
                }

            ];

            let option = {
                width: '100%',
                dataModel: {
                    recIndx: "inspStationId",
                    contentType: "application/json;charset=UTF-8",
                    location: "remote",
                    dataType: "JSON",
                    method: "POST",
                   url: "/eyc/searchInspStations",
                    postData: eyc.pqGrid.searchParam,
                    getData: eyc.pqGrid.dataResponse,
                    error: eyc.ajax.ajaxError
                },
                pageModel: {
                    type: "remote",
                    rPP: 50,
                    curPage: 1,
                    rPPOptions: [50, 100, 200]
                },
                sortModel: {
                    type: 'remote',
                    single: true
                },
                colModel: colModel,
                searchFormId: "#searchInspStationForm",
                scrollModel: {autoFit: false},
                showTop: false,
                numberCell: {show: false},
                virtualX: false,
                virtualY: true,
                wrap: false,
                height: calcTableHeight(config.$table),
                selectionModel: {type: 'row', toggle: true, mode: "single"}
            };
            eyc.pqGrid.init(config.$table, option);
        };
        let setTableHeight = () => {
            config.$table.pqGrid("option", "height", calcTableHeight(config.$table));
            config.$table.pqGrid("refreshView");
        };
        let add = function () {
            addOrEdit();
        };
        let edit = function () {
            let row = eyc.pqGrid.getSelectRow(config.$table);
            if (!row) {
                return;
            }
            addOrEdit(row.rowData);
        };
        let del= function() {
            let row = eyc.pqGrid.getSelectRow(config.$table);
            if (!row) {
                return;
            }
            layer.confirm(`确定删除[${row.rowData.company}]商户吗?`, {
                btn: ['确定', '取消'], //可以无限个按钮
            }, function (index, layero) {
                eyc.ajax.promise('/eyc/deleteInspStation',row.rowData).then(res=>{
                    if(res.data){
                        parent.layer.msg('删除成功~~');
                        layer.close(index);
                        refreshData();
                    }
                });
            },function(index, layero) {
            });

        };
        let addOrEdit = function (rowData) {
            parent.layer.open({
                type: 2,
                title: '商户维护',
                area: ['600px', '550px'],
                content: '/page/addOrEditInspStation',
                success: function (layero, index) {
                    if (rowData) {
                        let iframeWin = parent.window[layero.find('iframe')[0]['name']];
                        iframeWin.initData(rowData);
                    }

                }
            });
        };
        $(window).resize(function () {
            setTableHeight();
        });
        $(function () {
            layui.use(['form'], function () {
                initTable();
            });
            $('body').on('click', 'button[data-method]', function (e) {
                let fun = eval($(this).data().method);
                new fun($(this).data());
                e.stopPropagation();
            });
        });
        window.refreshData=function () {
            config.$table.pqGrid("refreshDataAndView");
        };

    </script>
</section>
</html>